<!-- 车型添加 -->
<template>
  <el-dialog
    :title="`${id ? '编辑车型' : '添加车型'}`"
    :visible.sync="dialogFormVisible"
  >
    <el-form
      ref="dataForm"
      :model="dataForm"
      :rules="dataRules"
    >
      <el-form-item
        label="车辆类型"
        prop="name"
        label-width="100px"
      >
        <el-input
          v-model="dataForm.name"
          placeholder="请输入车辆类型"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="应载重量"
        prop="allowableLoad"
        label-width="100px"
      >
        <el-input
          v-model="dataForm.allowableLoad"
          placeholder="请输入车型载重"
        ><i
          slot="suffix"
          style="font-style:normal;margin-right: 10px;color: black"
        >吨</i></el-input>
      </el-form-item>
      <el-form-item
        label="应载体积"
        prop="allowableVolume"
        label-width="100px"
      >
        <el-input
          v-model="dataForm.allowableVolume"
          placeholder="请输入车型体积"
        ><i
          slot="suffix"
          style="font-style:normal;margin-right: 10px;color: black"
        >立方</i></el-input>
      </el-form-item>
      <el-form-item
        label="长"
        prop="measureLong"
        label-width="100px"
      >
        <el-input
          v-model="dataForm.measureLong"
          placeholder="0.0"
        ><i
          slot="suffix"
          style="font-style:normal;margin-right: 10px;color: black"
        >米</i></el-input>
      </el-form-item>
      <el-form-item
        label="宽"
        prop="measureWidth"
        label-width="100px"
      >
        <el-input
          v-model="dataForm.measureWidth"
          placeholder="0.0"
        ><i
          slot="suffix"
          style="font-style:normal;margin-right: 10px;color: black"
        >米</i></el-input>
      </el-form-item>
      <el-form-item
        label="高"
        prop="measureHigh"
        label-width="100px"
      >
        <el-input
          v-model="dataForm.measureHigh"
          placeholder="0.0"
        ><i
          slot="suffix"
          style="font-style:normal;margin-right: 10px;color: black"
        >米</i></el-input>
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
      style="text-align: center;"
    >
      <el-button @click="closeDialog">取 消</el-button>
      <el-button
        type="warning"
        @click="addCarType"
      >{{ id? '修改' : '添加' }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { add, update } from '@/api/transit'
export default {
  name: 'CarModelsAdd',
  data() {
    return {
      dialogFormVisible: false, // 弹框开关
      dataForm: {
        name: '', // 车辆类型
        allowableLoad: null, // 应载重量
        allowableVolume: null, // 应载体积
        measureHigh: null, // 高
        measureWidth: null, // 宽
        measureLong: null // 长
      },
      dataRules: {
        name: [
          { required: true, message: '请输入车辆类型', trigger: 'blur' }
        ],
        allowableLoad: [
          { required: true, message: '请输入准载重量', trigger: 'blur' }
        ],
        allowableVolume: [
          { required: true, message: '请输入准载体积', trigger: 'blur' }
        ],
        measureHigh: [
          { required: true, message: '请输入高', trigger: 'blur' }
        ],
        measureWidth: [
          { required: true, message: '请输入宽', trigger: 'blur' }
        ],
        measureLong: [
          { required: true, message: '请输入长', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    id() {
      return this.dataForm.id
    }
  },
  methods: {
    // 提交表单(添加 & 编辑)
    addCarType() {
      this.$refs.dataForm.validate(async valid => {
        if (valid) {
          // 通过校验后的逻辑
          if (this.id) {
          // 更新接口
            await update(this.id, {
              ...this.dataForm,
              goodsTypes: [],
              num: 1
            })
          } else {
            // 添加接口
            await add(this.dataForm)
          }
          // 关闭
          this.closeDialog()
          // 弹窗显示
          this.$message.success(`${this.id ? '修改成功' : '添加成功'}`)
          // 重新拉取列表
          this.$emit('getList')
        }
      })
    },
    // 关闭
    closeDialog() {
      // 关闭添加框
      this.dialogFormVisible = false
      // 清空并重置表单
      this.dataForm = {
        name: '', // 车辆类型
        allowableLoad: null, // 应载重量
        allowableVolume: null, // 应载体积
        measureHigh: null, // 高
        measureWidth: null, // 宽
        measureLong: null // 长
      }
      this.$refs.dataForm.resetFields()
    }
  }
}
</script>
